<template>
  <div v-show="visible" class="modal-wrapper">
    <simple-transition :name="transition">
      <div v-show="visible" class="modal">
        <div class="modal-body">
          <slot></slot>
          <i v-if="closable" class="close" @click="close">
            <img src="~components/modal/close.png">
          </i>
        </div>
      </div>
    </simple-transition>
    <simple-transition name="fade">
      <div v-show="visible" @click="close" :class="['overlay', { 'in': overlay }]"></div>
    </simple-transition>
  </div>
</template>

<script>
  import SimpleTransition from 'components/transitions/simple-transition';
  export default {
    props: {
      overlay: {
        type: Boolean,
        default: true
      },
      visible: {
        type: Boolean,
        default: false
      },
      transition: {
        type: String,
        default: 'elastic-scale'
      },
      closable: {
        type: Boolean,
        default: true
      }
    },
    components: { SimpleTransition },
    methods: {
      close() {
        if (!this.closable) {
          return;
        }
        this.$emit('close');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .modal-wrapper {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    .animated {
      -webkit-animation-duration: 300ms;
      animation-duration: 300ms;
    }
  }
  .overlay {
    position: relative;
    width: 100%;
    height: 100%;
    &.in {
      background-color: rgba(0, 0, 0, 0.5);
    }
    z-index: 0;
  }
  .modal {
    position: absolute;
    z-index: 1;
    left: 0.5rem;
    right: 0.5rem;
    min-height: 0.8rem;
    margin: auto;
    font-size: 0;
    border-radius: 0.16rem;
  }
  .close {
    width: 0.74rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.3rem;
    box-shadow: none !important;
    z-index: 1;
  }
  img {
    width: 100%;
    height: auto;
  }
</style>

<style lang="scss">
  .modal {
    .modal-body > * {
      font-size: 0.36rem;
      border-radius: 0.16rem;
      box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, .5);
      max-height: 90vh;
      overflow: auto;
    }
  }
</style>
